<template>
  <div id="Pageheader">
    <v-navigation-drawer
      v-model="drawer"
      fixed
      hide-overlay
      class="hidden-sm-and-up"
      id="header-nav"
    >
      <v-toolbar color="primary darken-1" dark>
        <img :src="appLogo" height="36" :alt="app_name">
        <v-toolbar-title class="ml-0 pl-3">
          <span class="hidden-sm-and-up">{{ app_name }}</span>
        </v-toolbar-title>
      </v-toolbar>
      <vue-perfect-scrollbar class="drawer-menu--scroll" :settings="scrollSettings">
        <v-container fluid pb-0>
          <v-text-field
            id="search"
            key="search"
            label="搜索"
            append-icon="search"
            clearable
            hide-details
            single-line
            solo
            light
          />
        </v-container>
        <v-list>
          <v-subheader>菜单</v-subheader>
          <template v-for="(menu, index) in menus">
            <v-list-group v-if="menu.children.data.length>0" :key="index" no-action="no-action">
              <v-list-tile slot="activator" ripple="ripple">
                <v-list-tile-content>
                  <v-list-tile-title>{{ menu.name }}</v-list-tile-title>
                </v-list-tile-content>
              </v-list-tile>
              <v-list-tile
                v-for="(subMenu, subIndex) in menu.children.data"
                :to="subMenu.menu_type!==3?{path:subMenu.direct}:null"
                :href="subMenu.menu_type===3?subMenu.direct:`javascript:void(0)`"
                ripple="ripple"
                :key="subIndex"
                exact="exact"
              >
                <v-list-tile-content>
                  <v-list-tile-title>{{ subMenu.name }}</v-list-tile-title>
                </v-list-tile-content>
              </v-list-tile>
            </v-list-group>
            <v-list-tile
              v-else
              :to="menu.menu_type!==3?{path:menu.direct}:null"
              :href="menu.menu_type===3?menu.direct:`javascript:void(0)`"
              ripple="ripple"
              :key="index"
              exact="exact"
              rel="noopener"
            >
              <v-list-tile-content>
                <v-list-tile-title>{{ menu.name }}</v-list-tile-title>
              </v-list-tile-content>
            </v-list-tile>
          </template>
        </v-list>
      </vue-perfect-scrollbar>
    </v-navigation-drawer>

    <v-toolbar class="blue darken-3 py-2" dense dark flat>
      <v-toolbar-title class="ml-0 mr-5 pl-3">
        <v-toolbar-side-icon @click.stop="drawer = !drawer" class="hidden-sm-and-up"></v-toolbar-side-icon>
        <v-icon class="mx-3">fab fa-vuejs</v-icon>
        <span>{{ app_name }}</span>
      </v-toolbar-title>
      <v-text-field
        flat
        clearable
        solo-inverted
        hide-details
        prepend-inner-icon="search"
        label="搜索"
        class="ml-5 hidden-sm-and-down"
      ></v-text-field>
      <v-spacer></v-spacer>
      <v-toolbar-items class="hidden-sm-and-down">
        <template v-for="(menu,index) in menus">
          <v-btn
            v-if="menu.menu_type===1"
            :key="index"
            flat
            :to="menu.menu_type!==3?{path:menu.direct}:null"
            :href="menu.menu_type===3?menu.direct:`javascript:void(0)`"
            exact="exact"
            active-class
          >{{ menu.name }}</v-btn>
          <v-menu v-else :key="index" offset-y>
            <v-btn slot="activator" flat>{{ menu.name }}</v-btn>
            <v-list>
              <v-list-tile
                v-for="(subMenu, subIndex) in menu.children.data"
                :key="subIndex"
                :to="subMenu.menu_type!==3?{path:subMenu.direct}:null"
                :href="subMenu.menu_type===3?subMenu.direct:`javascript:void(0)`"
                exact="exact"
                active-class
              >
                <v-list-tile-action>{{ subMenu.name }}</v-list-tile-action>
              </v-list-tile>
            </v-list>
          </v-menu>
        </template>
      </v-toolbar-items>
    </v-toolbar>
  </div>
</template>
<script>
import VuePerfectScrollbar from 'vue-perfect-scrollbar'
import navs from '@/api/navs'
import { getAllMenus } from '@/api/resource/menus'
import { mapGetters } from 'vuex'

export default {
  name: 'app-drawer',
  components: {
    VuePerfectScrollbar
  },
  data: () => ({
    drawer: false,
    nodes: [],
    menus: [],
    navs: navs,
    scrollSettings: {
      maxScrollbarLength: 160
    }
  }),
  computed: {
    appLogo () {
      return 'https://cdn.vuetifyjs.com/images/logos/v-alt.svg'
    },
    ...mapGetters([
      'app_name'
    ])
  },
  methods: {
    init () {
      let _this = this
      getAllMenus({ params: { include: 'children', root: 6, sortBy: 'order,asc' } }).then(res => {
        _this.menus = res.data
      })
    },
    routerTo (item) {
      if (item.href) return
      if (item.to) {
        return {
          name: item.to
        }
      } else {
        return { name: 'dashboard' }
      }
    }
  },
  created () {
    this.init()
  }
}
</script>
<style lang="less">
#headerNav {
  overflow: hidden;

  .drawer-menu--scroll {
    height: calc(100vh - 48px);
    overflow: auto;
  }
}
</style>
